<!--
 * @Author: your name
 * @Date: 2022-02-27 10:15:18
 * @LastEditTime: 2022-09-22 20:50:25
 * @LastEditors: xiaodong 565071984@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /video-play/src/pages/home.vue
-->
<template>
  <div class="main">
    <div class="steam-wrap">
      <div class="control-item">
        <input type="checkbox" id="isLive" v-model="isLive" />
        <label for="isLive">isLive</label>
        <input type="checkbox" id="hasAudio" v-model="hasAudio" />
        <label for="hasAudio">hasAudio</label>
        <input type="checkbox" id="hasVideo" v-model="hasVideo" />
        <label for="hasVideo">hasVideo</label>
        <input type="checkbox" id="isRecord" v-model="isRecord" />
        <label for="isRecord">isRecord</label>
      </div>
      <div class="stream-label">
        <div class="url-input">
          <label for="sURL" class="ipt-label">Stream URL1:</label>
          <input
            id="sURL"
            type="text"
            class="ipt-text"
            :defaultValue="videoUrl"
            v-model="videoUrl1"
          />
        </div>
       
      </div>
      <div class="stream-btn">
        <span class="toggle-btn" @click="toggleVideoUrl">切换视频流</span>
        <span class="toggle-btn" @click="flv_destroy">销毁视频</span>
        <!-- <span class="toggle-btn" @click="toggleLive">
          {{ isLive ? '切换成录播流' : '切换成直播流' }}
        </span> -->
        <span class="toggle-btn" @click="playVideoLocal">播放本地视频文件</span>
        <span class="toggle-btn" @click="setNotice">显示通知</span>
        <span class="toggle-btn" @click="getPlayer">获取视频原生对象</span>
        <span class="toggle-btn" @click="showBase64">显示图片流</span>
      </div>
    </div>

    <div class="video-flex-wrap" v-if="isPlay && videoCount.length>0">
      <div v-for="(item, index) in videoCount"  :key="index">
        <video-fly
        ref="videoCap"
        class="video-inner"
        :style="{ width: `200px` }"
        :url="item && item.videoUrl"
        :isLive="isLive"
        :isRecord="isRecord"
        :imageSrc="imageSrc"
        :errorImg="errorImg"
        v-if="item.hasAudio"
        :noticeTextObj="noticeTextObj"
        :playerType="playerType"
        :hasAudio="hasAudio"
        :hasVideo="hasVideo"
      />
      </div>
    
    </div>
    <div class="stream-label2">
        <div class="url-input" v-for="(item,index) in videoCount" :key="index">
          <label for="sURL" class="ipt-label">Stream URL{{index+1}} :</label>
          <input
            id="sURL"
            type="text"
            class="ipt-text"
            :defaultValue="item && item.videoUrl"
            v-model="item.videoUrl"
          />
          <input type="checkbox"  v-model="item.hasAudio" class="checked"/>
        </div>
      </div>
      <div class="stream-btn">
        <span class="toggle-btn" @click="toggleVideoPlay">切换播放</span>
      </div>
  </div>
</template>

<script>
import videoFly from '@/components/video/src/video.vue'; //视频播放组件
import VideoDemo from '@/components/video/src/videoDemo.vue';
const token =
  'eyJhbGciOiJIUzI1NiJ9.eyJ0ZW5hbnRfaWQiOiJ6aDAwMDExIiwidGVuYW50X25hbWUiOiLkuInljp_kuLDljp_lhazlhbHkuqTpgJrmsb3ovabmnInpmZDlhazlj7giLCJ1c2VyX25hbWUiOiJzeWZ5LXZpZGVvIiwidGVuYW50X2RldmljZV9ubyI6IjExMDkiLCJwZXJzb25fbmFtZSI6IiIsImNsaWVudF9pZCI6bnVsbCwiY2xpZW50X2FjY291bnQiOm51bGwsInVzZXJfdHlwZSI6MiwidXNlcl9pZCI6IjE1NDIxMDk0Njg0NDQ5MjE4NTgiLCJvcmdfaWQiOiIxIiwib3JnX25hbWUiOiLkuInljp_kuLDljp_lhazlhbHkuqTpgJrmsb3ovabmnInpmZDlhazlj7giLCJleHAiOjE2NjM4NTM4ODAsImNsaWVudF9uYW1lIjpudWxsLCJ0ZW5hbnRfY29kZSI6InN5ZnkifQ.wv3QfQt7CBaq7K-mM0Xp0jCme8qNKkPQYBYMIQr462s';
export default {
  name: 'Home',
  props: {
    msg: String,
  },
  computed: {
    currentWidth() {
      let count = 1;
      if (this.videoCount?.length > 2) {
        count = 6;
      }
      const currentPer = 100 / count; //this.videoCount
      return currentPer;
    },
  },
  created() {
    // console.log(this.videoUrl, '播放链接');
  },
  data() {
    return {
      noticeTextObj: null,
      videoCount: [
        {
          videoUrl: `ws://222.76.217.245:31034/websocket/video?onlineNo=11092911157&ch=1&datatype=0&stream=0&access_token=${token}`,
          hasAudio: true
        },
        {
          videoUrl: `ws://222.76.217.245:31034/websocket/video?onlineNo=110911007950&ch=2&datatype=0&stream=1&access_token=${token}`,
          hasAudio: true
        },
        {
          videoUrl: `ws://222.76.217.245:31034/websocket/video?onlineNo=110911007950&ch=2&datatype=0&stream=1&access_token=${token}`,   
          hasAudio: true
        },
        {
          videoUrl: `ws://222.76.217.245:31034/websocket/video?onlineNo=110911007950&ch=2&datatype=0&stream=1&access_token=${token}`,
          hasAudio: true
        },
        {
          videoUrl: `ws://222.76.217.245:31034/websocket/video?onlineNo=110911007950&ch=2&datatype=0&stream=1&access_token=${token}`,
          hasAudio: true
        },
        {
          videoUrl: `ws://222.76.217.245:31034/websocket/video?onlineNo=110911007950&ch=2&datatype=0&stream=1&access_token=${token}`,
          hasAudio: true
        },
        {
          videoUrl: `ws://222.76.217.245:31034/websocket/video?onlineNo=110911007950&ch=2&datatype=0&stream=1&access_token=${token}`,
          hasAudio: true
        },
        {
          videoUrl: `ws://222.76.217.245:31034/websocket/video?onlineNo=110911007950&ch=2&datatype=0&stream=1&access_token=${token}`,
          hasAudio: false
        }
      ],
      playerType: 'flvjs', //flvjs
      isLive: false, //是否直播流
      isRecord: true, //是否历史流
      hasAudio: true,
      hasVideo: true,
      isPlay: false,
      errorImg:
        'https://img1.baidu.com/it/u=2264572706,3926600511&fm=253&fmt=auto&app=138&f=PNG?w=889&h=500', //错误图片显示
      imageSrc:
        'https://1301408934.vod2.myqcloud.com/d9f1f7c3vodcq1301408934/15bc22b75285890818252698642/469OlLni1HIA.jpg',
      localVideo: require('@/assets/闽A222254(100022225454)-220306-000000-003000-CH1.mp4'),
      videoUrl1: `ws://117.29.161.242:31034/websocket/video?onlineNo=100022225454&ch=1&datatype=0&stream=1&access_token=${token}`, //实时流
      videoUrl2:
        'https://1301408934.vod2.myqcloud.com/b0dbe56bvodtranscq1301408934/e193c6fb387702296790290159/v.f100010.mp4',
      videoUrl: `ws://222.76.217.245:31034/websocket/video?onlineNo=11092911107&ch=1&datatype=0&stream=1&access_token=${token}`, //回拨流
    };
  },
  components: {
    videoFly,
    VideoDemo,
  },
  methods: {
    toggleVideoPlay(){
      this.isPlay = !this.isPlay
    },
    async showBase64() {
      const videoCape = this.$refs.videoCap[0];
      videoCape.showBase64(); //显示图片流
      const base64Blob = await videoCape.getBase64(); //获取图片流
      console.log(base64Blob, '图片流');
    },
    getPlayer() {
      const videoCape = this.$refs.videoCap[0];
      const mediaObj = videoCape?.mediaObj;
      console.log(mediaObj, 'video对象', mediaObj?.buffered, '是否有buff数据');
    },
    setNotice() {
      const time = new Date().getTime();
      this.noticeTextObj = {
        text: `这是一个通知${time}`,
        duration: 2000, //停留时长，默认1000ms
        style: {
          //toast样式，默认
          fontSize: '14px',
          color: '#fff',
          background: 'rgba(0, 0, 0, 0.6)',
          borderRadius: '40px',
          top: '50%',
          left: '50%',
        },
      };
    },
    playVideoLocal() {
      this.videoCount.forEach((item)=> {
        item.videoUrl = this.localVideo;
      })
     
      this.isLive = false;
    },
    toggleLive() {
     
      this.isLive = !this.isLive;
    },
    toggleVideoUrl() {
      if (!this.videoUrl1 || !this.videoUrl2) {
        alert('请先输入流地址');
        return;
      }
      this.videoCount.forEach((item => {
          item.videoUrl = this.videoUrl1;
        }))
      // if (this.videoUrl !== this.videoUrl1) {
       
      // } else {
      //   alert('视频源相同,请重新输入');
      // }
      // console.log(this.videoUrl, '切换视频源');
    },
   
    flv_destroy() {
      const videoCape = this.$refs.videoCap[0];
      videoCape.flvjsDestroy();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.video-flex-wrap {
  display: flex;
  flex-wrap: wrap;
  // max-width: 300px;
  .video-inner {
    // display: flex;
    // flex: 1;
    // width: 12%;
  }
}
.steam-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 1;
  width: 100%;
  margin: 0 0 12px 0;
  .stream-label {
    display: flex;
    width: 100%;
    margin: 0 10px 10px;
    .url-input {
      display: flex;
      flex-direction: row;
      flex: 1;
      // width: 100%;
      justify-content: flex-start;
      .ipt-label {
        display: flex;
        // flex: 1;
        // width: 100%;
      }
      .ipt-text {
        display: flex;
        flex: 1;
        margin-left: 10px;
        // width: 100%;
      }
    }
  }

  .stream-btn {
    .toggle-btn {
      cursor: pointer;
      margin: 0 12px;
    }
  }
}
.stream-label2{
  margin-top: 20px;
  .url-input{
    margin: 10px 0;
  }
  .ipt-text{
    width: 80%;
    height: 30px;
    padding: 5px;
    margin-left: 10px;
  }
  .checked{
    margin-left: 10px;
  }
}
</style>
